<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-01-12 10:52:50
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-28 17:36:31
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\supply-management\\components\\choose-famifiar\\choose-famifiar.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<!-- <button nz-button nzType="primary" style="margin-bottom: 24px" (click)="add()"><i nz-icon nzType="plus"></i>添加司机</button> -->
<!-- 搜索区 -->
<nz-spin [nzSpinning]="service.http.loading">
<div nz-row nzGutter="8">
  <div nz-col [nzSpan]="18">
    <sf #sf [ui]="ui" [schema]="schema" [button]="'none'"></sf>
  </div>
  <div nz-col [nzSpan]="6">
    <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st.load(1)">查询</button>
    <button nz-button (click)="resetSF()">重置</button>
  </div>
</div>

<div nz-row nzGutter="8">
  <div nz-col [nzSpan]="12">
    <!-- 数据列表 -->
    <st #st [bordered]="true" [data]="service.$api_getListCars" [columns]="columns" size="small"
      [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
      [res]="{ reName: { list: 'data.records', total: 'data.total' }, process: reqProcess }"
      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
      [loadingDelay]="500" [loading]="false" [widthMode]="{ type: 'strict' }" [scroll]="{ x: '600px' }"
      style="margin-top: 22px">
      <ng-template st-row="userCarLicenseDesensitizationVOList" let-item let-index="index">
        <nz-select [(ngModel)]="item.default" (ngModelChange)="carChange($event, item)" style="width: 100%">
          <nz-option nzValue="" nzLabel="不限"></nz-option>
          <nz-option [nzValue]="cart" [nzLabel]="cart.carNo"
            *ngFor="let cart of item.userCarLicenseDesensitizationVOList"> </nz-option>
        </nz-select>
      </ng-template>
    </st>
  </div>
  <div nz-col [nzSpan]="12">
    <!-- 选中列表 -->
    <div>已选择{{ st2Data.length }}位司机</div>
    <st #st2 [bordered]="true" [data]="st2Data" [columns]="columns2" size="small"
      [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
      [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
      [loadingDelay]="500" [loading]="false" [widthMode]="{ type: 'strict' }" [scroll]="{ x: '600px' }">
      <ng-template st-row="captain" let-item let-index="index">
        <span>{{ item.captainName }}&nbsp;{{ item.captainPhone }}</span> &nbsp;
        <a (click)="setCaptain(item, index)">设置</a>
      </ng-template>
      <ng-template st-row="defaultCar" let-item let-index="index">
        {{item.default?.carNo}}
      </ng-template>
    </st>
  </div>
</div>
</nz-spin>

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="cancel()">取消</button>
  <button nz-button nzType="primary" (click)="ok()">发布并指派给司机</button>
</div>